<script setup lang="ts">
import { ArrowRight } from '@element-plus/icons-vue'
import { storeToRefs } from 'pinia';
import { ref } from 'vue';
import { useGlobalStore } from '~/store/global';
import { useSourceStore } from '~/store/source';
import { getContent } from '~/utils/crawler';

const { currentContent, currentContentTitle, } = storeToRefs(useGlobalStore())
const {sources, currentSourceIdx} = storeToRefs(useSourceStore())

const content = ref<GetContentResponseType>({ content: [], isPics: false })

const source = sources.value[currentSourceIdx.value]
getContent(currentContent.value, source.content_selectors.img_url, source.content_selectors.text).then(res => {
	content.value = res
})

</script>

<template>
	<div>
		<div mb-5>
			<el-breadcrumb :separator-icon="ArrowRight">
				<el-breadcrumb-item><span font-bold text-black>浏览</span></el-breadcrumb-item>
				<el-breadcrumb-item :to="{ path: '/' }">分类列表</el-breadcrumb-item>
				<el-breadcrumb-item :to="{ path: '/title-table'}">目录</el-breadcrumb-item>
				<el-breadcrumb-item>内容</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div>
			<ElCard>
				<div text-center>{{currentContentTitle}}</div>
				<ElScrollbar>
					<div v-if="content.isPics">
						<img v-for="(it, idx) in content.content" :src="currentContent + it" :key="idx" >
					</div>
					<div v-else v-html="content.content[0]">
					</div>
				</ElScrollbar>
			</ElCard>
		</div>
	</div>
</template>